<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:s="http://sduept.security.el/func"
	template="/template/template.xhtml">
	<ui:define name="head">
	<link rel="stylesheet" href="/resources/bootstrap/css/bootstrap-datetimepicker.min.css" />
		<style>
#WrapProtectTimeLine {
	height: 50px;
	padding-top: 10px;
}
</style>

	</ui:define>
	<ui:define name="content">
		<div class='full-center-content-scroll-noheader'>
			<div id="WrapProtectTimeLine" class="col-sm-12 col-lg-12">
				<h:form>
					<p:remoteCommand name="selectYear" actionListener="#{protectDefectsController.selectYear}" />
				</h:form>
				<p:outputLabel value="发生年份 ：" />
				<input type="text" id="year" onchange="changeYear()" style="width:60px;text-align:center" />
				<!-- <h:selectOneMenu value="#{protectDefectsController.year}"
					id="year_id" style="width:130px;margin-right:20px;height:30px">
					<p:ajax event="change" oncomplete="initDatas()" />
					<f:selectItems value="#{protectDefectsController.years}" />
				</h:selectOneMenu> -->
				<p:commandButton value="数据维护" icon="ui-icon-document"
					oncomplete="PF('dataDlg').show()" update="form:dataDlg"
					process="@this" style="margin-left:15px;"
					actionListener="#{protectDefectsController.initData}"
					rendered="#{s:hasPermission(session,'tjfx_bhqxfx_sjwh')}" />
			</div>
			<div class="nav-tabs-custom">
				<ul class="nav nav-tabs pull-left">
					<li class="active"><a href="#totalCase" data-toggle="tab">总体情况</a></li>
					<li><a href="#detailedCase" id="detailedCaseTab"
						data-toggle="tab">具体情况</a></li>
				</ul>
				<div class="tab-content no-padding">
					<div class="chart tab-pane active" id="totalCase"
						style="position: relative">
						<div class='col-sm-12'>
							<div class='info-box bg-green'>
								<span class='info-box-icon'> <i
									class='icon ion-pie-graph'></i>
								</span>
								<div class='info-box-content' style='height: 90px; line-height: 90px; font-size: 18px'>
									<span class='year'>2011</span>年550kV继电保护共发生缺陷<span
										class='totalNum'></span>起，已消缺<span class='reality'></span>起，消缺率为<span
										class='rate'></span>,及时消缺率为<span class='timelyRate'></span>。
								</div>
							</div>
						</div>
						<div class='col-sm-12'>
							<div class='box box-primary'>
								<div class="box-header with-border">
									<h6 class='box-title'>按缺陷省区划分</h6>
								</div>
								<div class='box-body'>
									<div id='province' style="height: 250px;text-align:center;color:grey;font-size:16px;font-weight:bold;"></div>
								</div>
							</div>
						</div>
						<div class='col-sm-12'>
							<div class='box box-primary'>
								<div class="box-header with-border">
									<h6 class='box-title'>按缺陷类别划分</h6>
								</div>
								<div class='box-body'>
									<div id='category' style="height: 250px;text-align:center;color:grey;font-size:16px;font-weight:bold;"></div>
								</div>
							</div>
						</div>
						<div class='col-sm-12 '>
							<div class='box box-primary'>
								<div class="box-header with-border">
									<h6 class='box-title'>按缺陷设备划分</h6>
								</div>
								<div class='box-body'>
									<div id='device' style="height: 250px;text-align:center;color:grey;font-size:16px;font-weight:bold;"></div>
								</div>
							</div>
						</div>
					</div>
					<div class="chart tab-pane" id="detailedCase"
						style="position: relative">
						<div class='col-sm-12 no-padding'>
							<div class="box box-primary" id="protectorPanel">
								<div class='box-header with-border'>
									<h6 class='box-title'>保护装置缺陷</h6>
								</div>
								<div class='box-body'>
									<div class='col-sm-12 no-padding'>
										<div class='info-box bg-green'>
											<span class='info-box-icon'> <i
												class='icon ion-pie-graph'></i>
											</span>
											<div class='info-box-content'
												style='height: 90px; line-height: 90px; font-size: 18px'>
												<span class='year'>2010</span>年，共发生<span class='proNum'></span>起保护装置缺陷，占缺陷总数<span
													class='proRate'></span>。
											</div>
										</div>
									</div>
									<div class='col-sm-6'>
										<div id='protectorDefPosition' style="height: 250px;text-align:center;color:grey;font-size:16px;font-weight:bold" />
										<!-- <div class='info-box-content' style='height: 40px; font-size: 18px'>
											<span class='defPositionTitle' />
										</div>
										<div class="box-body">
											<div id='protectorDefPosition' style="height: 250px;text-align:center;color:grey;font-size:16px;font-weight:bold" />
										</div> -->
									</div>
									<div class='col-sm-6 '>
										<div id='protectorDefCause' style="height: 250px;text-align:center;color:grey;font-size:16px;font-weight:bold" />
										<!-- <div class='info-box-content' style='height: 30px; font-size: 18px'>
											<span class='defCauseTitle' />
										</div>
										<div class="box-body">
											<div id='protectorDefCause' style="height: 250px;text-align:center;color:grey;font-size:16px;font-weight:bold" />
										</div> -->
									</div>
								</div>
							</div>
						</div>
						<div class='col-sm-12 no-padding'>
							<div class="box box-primary" id="secondCircuitPanel">
								<div class='box-header with-border'>
									<h6 class='box-title'>二次回路缺陷</h6>
								</div>
								<div class='box-body'>
									<div class='col-sm-12 no-padding'>
										<div class='info-box bg-green'>
											<span class='info-box-icon'> <i
												class='icon ion-pie-graph'></i>
											</span>
											<div class='info-box-content'
												style='height: 90px; line-height: 90px; font-size: 18px'>
												<span class='year'>2010</span>年，共发生<span class='secNum'></span>起保护装置二次回路缺陷，占缺陷总数<span
													class='secRate'></span>。
											</div>
										</div>
									</div>
									<div class='col-sm-6'>
										<!-- <div class='info-box-content' style='height: 40px; font-size: 18px'>
											<span class='defPositionTitle' />
										</div>
										<div class="box-body">
											<div id='secondDefPosition' style="height: 250px;text-align:center;color:grey;font-size:16px;font-weight:bold" />
										</div> -->
										<div id='secondDefPosition' style="height: 250px;text-align:center;color:grey;font-size:16px;font-weight:bold" />
									</div>
									<div class='col-sm-6'>
										<!-- <div class='info-box-content' style='height: 40px; font-size: 18px'>
											<span class='defCauseTitle' />
										</div>
										<div class="box-body">
											<div id='secondDefCause' style="height: 250px;text-align:center;color:grey;font-size:16px;font-weight:bold" />
										</div> -->
										<div id='secondDefCause' style="height: 250px;text-align:center;color:grey;font-size:16px;font-weight:bold" />
									</div>
								</div>
							</div>
						</div>
						<div class='col-sm-12 no-padding'>
							<div class="box box-primary" id="protectorPanel">
								<div class='box-header with-border'>
									<h6 class='box-title'>保护通道缺陷</h6>
								</div>
								<div class='box-body'>
									<div class='col-sm-12 no-padding'>
										<div class='info-box bg-green'>
											<span class='info-box-icon'> <i class='icon ion-pie-graph'></i>
											</span>
											<div class='info-box-content'
												style='height: 90px; line-height: 90px; font-size: 18px'>
												<span class='year'>2010</span>年，共发生<span class='channelNum'></span>起保护通道缺陷，占缺陷总数<span
													class='channelRate'></span>。
											</div>
										</div>
									</div>
									<div class='col-sm-6'>
										<!-- <div class='info-box-content' style='height: 40px; font-size: 18px'>
											<span class='defPositionTitle' />
										</div>
										<div class="box-body">
											<div id='channelDefPosition' style="height: 250px;text-align:center;color:grey;font-size:16px;font-weight:bold" />
										</div> -->
										<div id='channelDefPosition' style="height: 250px;text-align:center;color:grey;font-size:16px;font-weight:bold" />
									</div>
									<div class='col-sm-6'>
										<!-- <div class='info-box-content' style='height: 40px; font-size: 18px'>
											<span class='defCauseTitle' />
										</div>
										<div class="box-body">
											<div id='channelDefCause' style="height: 250px;text-align:center;color:grey;font-size:16px;font-weight:bold" />
										</div> -->
										<div id='channelDefCause' style="height: 250px;text-align:center;color:grey;font-size:16px;font-weight:bold" />
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<h:form id="form">
			<p:dialog widgetVar="dataDlg" header="保护缺陷数据维护" modal="true"
				id="dataDlg" width="1500" height="600" onHide="initDatas()">
				<div class="box box-solid with-border">
					<div class="box-header">
						<p:outputLabel value="发生时间 ：" />
						<h:selectOneMenu value="#{protectDefectsController.year}"
							style="width:130px;margin-right:20px;height:30px" id="occur_year">
							<f:selectItem itemLabel="全部" itemValue="0" />
							<f:selectItems value="#{protectDefectsController.years}" />
						</h:selectOneMenu>
						<p:outputLabel value="选择公司 ：" />
						<h:selectOneMenu value="#{protectDefectsController.province}" id="province"
							style="width:130px;margin-right:20px;height:30px">
							<f:selectItem itemLabel="全部" itemValue="0" />
							<f:selectItems value="#{protectDefectsController.provinces}" />
						</h:selectOneMenu>
						<p:outputLabel value="缺陷等级 ：" />
						<h:selectOneMenu value="#{protectDefectsController.defectLevel}"
							style="width:130px;margin-right:20px;height:30px" id="defectLevel">
							<f:selectItem itemLabel="全部" itemValue="0" />
							<f:selectItems value="#{protectDefectsController.defectLevels}" />
						</h:selectOneMenu>
						<p:outputLabel value="是否消缺 ：" />
						<h:selectOneMenu value="#{protectDefectsController.solved}"
							style="width:130px;margin-right:20px;height:30px" id="solve">
							<f:selectItem itemValue="true" itemLabel="是" />
							<f:selectItem itemValue="false" itemLabel="否" />
						</h:selectOneMenu>
						<p:commandButton value="查询" icon="ui-icon-search"
							style="margin-right:10px"
							actionListener="#{protectDefectsController.queryByCondition}"
							update="form:dataTable" />
						<p:commandButton value="重置" icon="ui-icon-refresh"
							style="margin-right:10px"
							actionListener="#{protectDefectsController.reset()}"
							update="dataTable occur_year province defectLevel solve" />
					</div>
				</div>
				<p:toolbar id="toolbar">
					<f:facet name="left">
						<p:commandButton value="新建" icon="fa fa-plus"
							actionListener="#{protectDefectsController.preCreateCountProtectDefect}"
							oncomplete="PF('createDlg').show()" update="createDlg" />
						<p:commandButton value="编辑" icon="fa fa-pencil"
							actionListener="#{protectDefectsController.editCountProtectDefect}"
							id="edit" oncomplete="PF('createDlg').show()" update="createDlg"
							disabled="#{protectDefectsController.selectCountProtectDefect.id == null}" />
						<p:growl id="msgs" showDetail="true" />
						<p:commandButton value="删除" id="delete" icon="fa fa-trash"
							update="msgs form form:occur_year"
							disabled="#{protectDefectsController.selectCountProtectDefect.id == null}"
							actionListener="#{protectDefectsController.deleteCountProtectDefect}">
							<p:confirm header="提示" message="确定删除该记录吗?" icon="ui-icon-alert" />
						</p:commandButton>
						<p:commandButton value="下载模板" ajax="false"
							icon="ui-icon-arrowthick-1-s"
							actionListener="#{protectDefectsController.fileDownloadView()}">
							<p:fileDownload value="#{protectDefectsController.templateFile}" />
						</p:commandButton>
						<p:commandButton id="newStatBtn" value="上传文件" icon="ui-icon-arrowthick-1-n"
							actionListener="#{protectDefectsController.chooseEquipment}">
							<p:ajax event="dialogReturn"
								update="form:msgs form:dataTable form:occur_year"
								listener="#{protectDefectsController.onSelectorChosen}" />
						</p:commandButton>
					</f:facet>
				</p:toolbar>
				<p:confirmDialog global="true" showEffect="fade" hideEffect="fade">
					<p:commandButton value="是" type="button"
						styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
					<p:commandButton value="否" type="button"
						styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
				</p:confirmDialog>
				<p:dataTable value="#{protectDefectsController.countProtectDefects}"
					var="act" paginator="true" id="dataTable" emptyMessage="无记录"
					rowKey="#{act.id}" rows="20" rowIndexVar="ite"
					selection="#{protectDefectsController.selectCountProtectDefect}"
					paginatorTemplate="{Customization} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
					rowsPerPageTemplate="20,50,100" paginatorPosition="bottom"
					style="text-align:center;margin-top:3px">
					<f:facet name="{Customization}">
						<p:outputLabel value="总计：#{protectDefectsController.countProtectDefects.size()} 条记录" style="margin-right:20px;" />
					</f:facet>
					<p:ajax event="rowSelectRadio" update="form:edit form:delete createDlg" listener="#{protectDefectsController.onRowSelect}" />
					<p:column selectionMode="single" width="60" style="text-align:center" />
					<p:column width="60" headerText="序号">
						<h:outputText value="#{ite+1}" />
					</p:column>
					<p:column headerText="省区" sortBy="#{act.province}" width="10%">
						<p:outputLabel value="#{act.province}" />
					</p:column>
					<p:column headerText="缺陷等级" sortBy="#{act.defectLevel}" width="5%">
						<p:outputLabel value="#{act.defectLevel}" />
					</p:column>
					<p:column headerText="缺陷装置" sortBy="#{act.defectDevice}"
						width="10%">
						<p:outputLabel value="#{act.defectDevice}" />
					</p:column>
					<p:column headerText="缺陷部位" sortBy="#{act.defectPosition}"
						width="10%">
						<p:outputLabel value="#{act.defectPosition}" />
					</p:column>
					<p:column headerText="缺陷原因" sortBy="#{act.defectCause}" width="10%">
						<p:outputLabel value="#{act.defectCause}" />
					</p:column>
					<p:column headerText="缺陷类型" sortBy="#{act.defectType}" width="10%">
						<p:outputLabel value="#{act.defectType}" />
					</p:column>
					<p:column headerText="发生日期" sortBy="#{act.occurDate}" width="13%">
						<p:outputLabel value="#{act.occurDate}">
							<f:convertDateTime pattern="yyyy-MM-dd HH:mm:ss" timeZone="GMT+8" />
						</p:outputLabel>
					</p:column>
					<p:column headerText="规定消缺日期" sortBy="#{act.specifiedSolveDate}"
						width="13%">
						<p:outputLabel value="#{act.specifiedSolveDate}">
							<f:convertDateTime pattern="yyyy-MM-dd HH:mm:ss" timeZone="GMT+8" />
						</p:outputLabel>
					</p:column>
					<p:column headerText="消缺日期" sortBy="#{act.solveDate}" width="13%">
						<p:outputLabel value="#{act.solveDate}">
							<f:convertDateTime pattern="yyyy-MM-dd HH:mm:ss" timeZone="GMT+8" />
						</p:outputLabel>
					</p:column>
					<p:column headerText="是否消缺" width="6%">
						<p:outputLabel value="#{act.solved =='true' ? '是':'否'}" />
					</p:column>
				</p:dataTable>
			</p:dialog>
		</h:form>
		<p:dialog widgetVar="createDlg" header="保护缺陷数据" id="createDlg"
			width="350" height="450">
			<h:form id="createForm">
				<p:toolbar>
					<f:facet name="left">
						<p:commandButton value="保存" icon="ui-icon-disk"
							actionListener="#{protectDefectsController.saveCountProtectDefect}"
							update=":form:msgs :form:dataTable :form:toolbar :form:occur_year"
							oncomplete="PF('createDlg').hide()" />
					</f:facet>
				</p:toolbar>
				<p:outputPanel style="text-align:center;">
					<p:panelGrid columns="2">
						<h:outputText value="省区" />
						<p:autoComplete
							value="#{protectDefectsController.countProtectDefect.province}"
							completeMethod="#{protectDefectsController.completeProvince}"
							dropdown="true" />
						<h:outputText value="缺陷等级" />
						<p:selectOneMenu style="width:100%"
							value="#{protectDefectsController.countProtectDefect.defectLevel}">
							<f:selectItem itemLabel="一般" itemValue="一般" />
							<f:selectItem itemLabel="重大" itemValue="重大" />
							<f:selectItem itemLabel="紧急" itemValue="紧急" />
						</p:selectOneMenu>
						<h:outputText value="缺陷装置" />
						<p:inputText label="content" style="width:100%"
							value="#{protectDefectsController.countProtectDefect.defectDevice}">
						</p:inputText>
						<h:outputText value="缺陷部位" />
						<p:inputText label="content" style="width:100%"
							value="#{protectDefectsController.countProtectDefect.defectPosition}">
						</p:inputText>
						<h:outputText value="缺陷原因" />
						<p:inputText label="content" style="width:100%"
							value="#{protectDefectsController.countProtectDefect.defectCause}"></p:inputText>
						<h:outputText value="缺陷类型" />
						<p:inputText label="content" style="width:100%"
							value="#{protectDefectsController.countProtectDefect.defectType}">
						</p:inputText>
						<h:outputText value="发生日期" />
						<p:calendar pattern="yyyy-MM-dd hh:mm:ss" navigator="true" style="width:100%"
							value="#{protectDefectsController.countProtectDefect.occurDate}"></p:calendar>
						<h:outputText value="规定消缺日期" />
						<p:calendar pattern="yyyy-MM-dd hh:mm:ss" navigator="true" style="width:100%"
							value="#{protectDefectsController.countProtectDefect.specifiedSolveDate}"></p:calendar>
						<h:outputText value="消缺日期" />
						<p:calendar pattern="yyyy-MM-dd hh:mm:ss" navigator="true" style="width:100%"
							value="#{protectDefectsController.countProtectDefect.solveDate}"></p:calendar>
						<h:outputText value="是否消缺" />
						<p:selectOneMenu style="width:100%"
							value="#{protectDefectsController.countProtectDefect.solved}">
							<f:selectItem itemLabel="是" itemValue="true" />
							<f:selectItem itemLabel="否" itemValue="false" />
						</p:selectOneMenu>
					</p:panelGrid>
				</p:outputPanel>
			</h:form>
		</p:dialog>
	</ui:define>
	<ui:define name="contentend">
		<script src="#{request.contextPath}/resources/plugins/echarts/echarts.js" />
		<script src="#{request.contextPath}/resources/js/mycharts/timeline.js" />
		<script src="#{request.contextPath}/resources/js/mycharts/categoryBarChart.js" />
		<script src="#{request.contextPath}/resources/js/mycharts/pieChart.js" />
		<script src='protectDefect.js' />
		<script src="#{request.contextPath}/resources/bootstrap/js/bootstrap-datetimepicker.min.js" />
		<script>
			$(function() {
				var t1 = window.setInterval(function() {
					var w = $('#WrapProtectTimeLine').width() + "";
					if (w != '0') {
						$('#province').css('width', w);
						$('#category').css('width', w);
						$('#device').css('width', w);
						window.clearInterval(t1);
					}
				}, 20);
				$('#detailedCaseTab').click(function() {
					var w = $('#detailedCase').width() + "";
					$('#protectorDefPosition').css('width', w / 2 - 45);
					$('#protectorDefCause').css('width', w / 2 - 45);
					$('#secondDefPosition').css('width', w / 2 - 45);
					$('#secondDefCause').css('width', w / 2 - 45);
					$('#channelDefPosition').css('width', w / 2 - 45);
					$('#channelDefCause').css('width', w / 2 - 45);
	
					proDefectPartChart.getChart().resize();
					proDefectCauseChart.getChart().resize();
					secDefectPartChart.getChart().resize();
					secDefectCauseChart.getChart().resize();
					channelDefPartChart.getChart().resize();
					channelDefCauseChart.getChart().resize();
				});
				
				var date = new Date();
				var currentYear = date.getFullYear();
				$('#year').val(currentYear);
				$('#year').datetimepicker({
					startView: 4,
					minView:4,
					autoclose : true,
					format : 'yyyy'
				});
				initDatas();
			})
		</script>
	</ui:define>
</ui:composition>
